<!DOCTYPE html>
<html>
<head>
	<title>症状</title>
	<script src='/js/jquery-3.6.4.min.js'></script>
	<link href="/js/jquery-ui-1.13.2/jquery-ui.min.css" rel="stylesheet">
	<script src='/js/jquery-ui-1.13.2/jquery-ui.min.js'></script>
	<style type="text/css">
		#tree {
		  display: flex;
		  flex-wrap: wrap;
		  font-size: 14px;
          font-family: Arial, sans-serif;
          line-height: 1.5;
          margin-left: 20px;
		}
			
		.item {
		  display: inline-block;
		  background: #fff;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 5px;
		}
		
		.item:hover {
            background: #f4f4f4;
        }
        #tree ul {
            padding-left: 20px;
            margin: 3px;
            list-style: none;
        }
		
		/* 鑺傜偣鐐瑰嚮鏃剁殑鏍峰紡 */
		ul li.clicked {
		  background-color: #87CEFA;
		}	
				
        #name-dialog {
		    position: absolute;
		    background-color: #fff;
		    border: 1px solid #ccc;
		    padding: 10px;
		    display: none;
		    
		  }
    
		#menu {
		    position: absolute;
		    background-color: #fff;
		    border: 1px solid #ccc;
		    padding: 10px;
		    display: none;
		}
		#edit{
			background-color:white;
		    color:"";
		}	
		#dele{
			background-color:white;
		    color:"";
		}		
		#edit:hover{
			background-color:gray;
		    color:white;
		}
		#dele:hover{
			background-color:gray;
		    color:white;
		}
		
		#okbut {
		  background-color: #4CAF50;
		  border: none;
		  color: white;
		  padding: 15px 32px;
		  text-align: center;
		  text-decoration: none;
		  display: inline-block;
		  font-size: 16px;
		  margin: 4px 2px;
		  cursor: pointer;
		  border-radius: 4px;
		}}
	</style>
</head>
<body>
	<div id="tree" ></div>
	
	<input id='zhengids' style='display:none'>
	<input id='zhengnames' style='display:none'>
	
	<div id="dialog" style="display:none;">
	  <p>璇风紪杈戠棁鐘讹細</p>
	  <input type="text" style='width:100%' id="zhengname">
	  <input id='id' style='display:none'>
	  <input id='pid' style='display:none'>
	</div>
	
	<div id="menu" style='display:none'>
		<div id='edit'>
		  缂栬緫鐥囩姸
		</div>
		<div id="dele">
		  鍒犻櫎鐥囩姸
		</div>
	</div>
	
	<button style='position: fixed;bottom: 100px;right:100px;' id='okbut' onclick='ok()'>确定</button>
	
	<script>
	    var afterUrl =  window.location.search.substring(1);
	    var v1 = afterUrl.substring(afterUrl.indexOf('=')+1,afterUrl.indexOf('&'));
	    var v2 = afterUrl.substring(afterUrl.indexOf('&')+7,afterUrl.length);
	    var decodedStr = decodeURIComponent(v2); 

	    $('#zhengids').val(v1);
	    $('#zhengnames').val(decodedStr);

	    v1=v1.replace(new RegExp('@', 'g'), ' ')
	    var sv=v1.split(' ');

	    $(document).ready(function(){
	    	sv.forEach(function(item, index, array) {
			    if(item.trim()!=''){
			    	$('#'+item.trim()).toggleClass("clicked");
				}
			});
	    });
	    
			    
		$("#dialog").dialog({
  	      modal: true,
  	      width: 400,
  	      height: 300,
  	      title: "濉啓鐥囩姸",
  	      position: { my: "center", at: "center", of: window },
  	      buttons: [
  	        {
  	          text: "鎻愪氦",
  	          click: function() {
  	            var name = $("#zhengname").val();
  	            $("#dialog").dialog("close");
  	            // TODO: 灏嗗鍚嶅彂閫佸埌鍚庡彴
  	            
  	          }
  	        }
  	      ]
  	    });
		$("#dialog").dialog("close");
		var closeMenu = function(event) {
		    if (!isMenuVisible) {
		      return;
		    }
		    if (event.target === menu || menu.contains(event.target)) {
		      return;
		    }
		    isMenuVisible = false;
		    menu.style.display = 'none';
		    document.removeEventListener('mousedown', closeMenu);
		  };
        // 鏍戝舰缁撴瀯鏁版嵁
        var treeData = #(zheng)

        function renderTree(data, parent) {
            var ul = document.createElement("ul");

            var i=0;
            for (var key in data) {
                i++;
                var li = document.createElement("li");
                
                var value = data[key];
                var type = typeof value;

                if (type === "object") {
                    li.className = "collapsed";
                    //li.innerHTML = key;
                    li.innerHTML ='<span class="childToggle">-</span>'+key;
                    renderTree(value, li);
                   
                } else {
                    li.className = "item";
                    li.value=value;
                    li.id=value;
                    li.innerHTML = key;

                    li.onclick = (function () {
                        var v=value;
                        var k=key;
                        return function () {
                        	event.stopPropagation();
                        	this.classList.toggle('clicked');
                        	
                        	var hv=$('#zhengids').val();
                        	var hn=$('#zhengnames').val();
                        	if(this.classList=='item'){
                        		hv=hv.replace(new RegExp('@'+v+'@', 'g'), '')
                            	hn=hn.replace(new RegExp('@'+k+'@', 'g'), '')
                            }else{
                            	hv=hv+'@'+v+'@';
                            	hn=hn+'@'+k+'@';
                            }
                        	$('#zhengids').val(hv);
                        	$('#zhengnames').val(hn);
                            //alert(key);
                        };
                    })(value);
					/////////////////////////////鍙抽敭鍗曞嚮
                    //li.addEventListener('contextmenu', function(event) {
                    //    event.preventDefault();
                    //    	menu.style.left = event.pageX + 'px';
                    //        menu.style.top = event.pageY + 'px';
                    //        menu.style.display = 'block';
                    //        isMenuVisible = true;
                    //        $('#id').val(this.value);
                    //        $('#zhengname').val(this.innerHTML);
                    //        document.addEventListener('mousedown', closeMenu);
                    //  });
					/////////////////////////////
                   
                }

                ul.appendChild(li);
            }

            if (parent) {
                parent.appendChild(ul);
            } else {
                document.getElementById("tree").appendChild(ul);
               
            }
        }

        renderTree(treeData);

        var nodes = document.querySelectorAll('li');
        Array.prototype.forEach.call(nodes, function(node) {
        	// 鑾峰彇褰撳墠鑺傜偣鐨勬墍鏈夊瓙鑺傜偣
            var childNodes = node.children;
            // 濡傛灉褰撳墠鑺傜偣鏈夊瓙鑺傜偣锛屾坊鍔犵偣鍑讳簨浠剁敤浜庡睍寮�鎴栨敹缂�
            if (childNodes.length > 1) {
                // 榛樿鎯呭喌涓嬫墍鏈夊瓙鑺傜偣閮芥槸闅愯棌鐨�
                //for (var i = 1; i < childNodes.length; i++) {
                //    childNodes[i].style.display = 'none';
                //}
                node.addEventListener('click', function() {
                	event.stopPropagation();
                    // 鍒囨崲灞曞紑鎴栨敹缂╃姸鎬�
                    if (childNodes[1].style.display === 'none') {
                        for (var i = 1; i < childNodes.length; i++) {
                            childNodes[i].style.display = 'block';
                        }
                    } else {
                        for (var i = 1; i < childNodes.length; i++) {
                            childNodes[i].style.display = 'none';
                        }
                    }
                	
                });
            }
        });
        	        

        ////////////////////////////////////////////////////////////////////////////////
        
        function ok(){
            var ids=$('#zhengids').val();
            var names=$('#zhengnames').val();
            
    		window.opener.setzhengdata( {'ids':ids,'names':names} );
        	window.close();
        }
        

    </script>
</body>

</html>